<template>
    <div id="charts" style="width:100%;height:100%;" v-loading="loading"></div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ScatterDiagram',
    data () {
        return {
            loading: false,
            color: ['green', 'red', 'blue', '#DA9151', '#FF2D2D', '#FF60AF', '#9F35FF', '#006030', '#FF0000', '#80FFFF', '#642100', '#64A600', '#F75000', '#0000C6', '#00DB00', '#FFFF37', '#FFD306', '#9AFF02', '#8600FF', '#E800E8'],
            isFirstOpen: true
        }
    },
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData',
            selectedField: 'common/getSelectedField'
        })
    },
    mounted () {
        this.init(this.selectedField)
    },
    watch: {
        selectedField (val) {
            if (!this.isFirstOpen) {
                this.init(val)
            }
        }
    },
    methods: {
        init (val) {
            var charts = this.$echarts.init(document.getElementById('charts'))
            charts.clear()
            let selectLen = val.length
            let interval = [6]
            for (let i = 1, len = val.length; i < len; i++) {
                const num = 7 + ((95 - 5 * len) / len + 5) * i
                interval.push(num)
            }
            var num = 0
            var originData = []
            var labelData = []
            var targetData = []
            let grid = []
            let series = []
            let xAxis = []
            let yAxis = []
            let title = []
            let list = this.analysisReportData.content['散点图']
            for (let i = 0; i < list.length; i++) {
                if (this.selectedField.includes(list[i].featureName) && list[i].featureType !== 'label') {
                    originData.push(list[i].values.slice(0, 100))
                }
                if (list[i].featureType === 'label') {
                    labelData = list[i].values.slice(0, 100)
                    targetData = list[i].distribution.split(',')
                }
            }
            for (let i = 0; i < targetData.length; i++) {
                if (i > 19) {
                    targetData[i] = {
                        value: targetData[i],
                        color: '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')
                    }
                } else {
                    targetData[i] = {
                        value: targetData[i],
                        color: this.color[i]
                    }
                }
            }
            for (let i = 0; i < originData.length; i++) {
                for (let k = 0; k < originData.length; k++) {
                    grid[num] = {
                        x: `${interval[k]}%`,
                        y2: `${interval[i]}%`,
                        width: `${(94 - 3 * selectLen) / selectLen}%`,
                        height: `${(94 - 3 * selectLen) / selectLen}%`
                    }
                    var arr = []
                    var allData = []
                    for (let j = 0; j < originData[i].length; j++) {
                        arr.push([originData[k][j], originData[i][j]])
                        allData[num] = arr
                    }
                    title.push({
                        text: `X轴：${val[i]}`,
                        subtext: `Y轴：${val[k]}`,
                        x: `${interval[i]}%`,
                        y2: `${interval[k] + (85 - 5 * selectLen) / selectLen}%`,
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 35 / selectLen < 8 ? 8 : 35 / selectLen
                        },
                        subtextStyle: {
                            color: '#333',
                            // fontWeight: 'bold',
                            fontSize: 35 / selectLen < 8 ? 8 : 35 / selectLen
                        }
                    })
                    series.push({
                        name: num,
                        type: 'scatter',
                        showSymbol: false,
                        hoverAnimation: false,
                        symbolSize: Math.floor(25 / originData.length),
                        xAxisIndex: num,
                        yAxisIndex: num,
                        itemStyle: {
                            color: (seriesIndex) => {
                                if (labelData.length) {
                                    for (let i = 0; i < targetData.length; i++) {
                                        if (labelData[seriesIndex.dataIndex] === +targetData[i].value) {
                                            return targetData[i].color
                                        }
                                    }
                                } else {
                                    return '#2680EB'
                                }
                            }
                        },
                        data: allData[num]
                    })
                    xAxis.push({
                        gridIndex: num,
                        axisLabel: {
                            margin: 6,
                            fontSize: 12 / selectLen < 8 ? 8 : 12 / selectLen,
                            formatter: function (value, index) {
                                if (value / 100000000 >= 1) {
                                    return Math.floor(value / 100000000 * 100) / 100 + '亿'
                                } else if (value / 10000 >= 1) {
                                    return Math.floor(value / 10000 * 100) / 100 + '万'
                                }
                                return value
                            }
                        },
                        axisTick: { show: false },
                        axisLine: { show: false }
                    })
                    yAxis.push({
                        gridIndex: num,
                        axisLabel: {
                            margin: 6,
                            fontSize: 12 / selectLen < 8 ? 8 : 12 / selectLen,
                            formatter: function (value, index) {
                                if (value / 100000000 >= 1) {
                                    return Math.floor(value / 100000000 * 100) / 100 + '亿'
                                } else if (value / 10000 >= 1) {
                                    return Math.floor(value / 10000 * 100) / 100 + '万'
                                }
                                return value
                            }
                        },
                        axisTick: { show: false },
                        axisLine: { show: false }
                    })
                    num++
                }
            }
            let option = {
                title,
                grid,
                tooltip: {
                    show: false
                },
                animation: false,
                xAxis,
                yAxis,
                series
            }
            charts.setOption(option, true)
            this.isFirstOpen = false
        }
    }
}
</script>
<style lang="less">
    #scatterDiagram {
        width: 100%;
        height: 100%;
    }
</style>
